<template>
  <div>
    <div style="margin-left: 100px">
      <h2>全部订单</h2>
    </div>
    <div style="padding: 20px 100px 0 100px">
      <div style="margin-bottom: 20px">
        <el-row :gutter="20">
          <el-col :span="7">宝贝</el-col>
          <el-col :span="2">订单号</el-col>
          <el-col :span="3">单价</el-col>
          <el-col :span="3">数量</el-col>
          <el-col :span="3">商品操作</el-col>
          <el-col :span="3">实付款</el-col>
          <el-col :span="3">交易状态</el-col>
        </el-row>
      </div>
      <!--购物车商品显示-->
      <!--    shoppingList-->
      <div style="height: 100px;border: 1px solid #ccc;padding: 15px 0" class="shopCartStyle" v-for="item in bookorderList">
        <el-row :gutter="20">

          <el-col :span="7" style="padding:0 20px">
            <div style="display: flex">
              <div style="">
                <el-image
                  style="width: 70px; height: 70px"
                  :src="getUrl(item.shopImg)"
                  fit="fill"></el-image>
              </div>
              <div style="font-size: 14px;color: #6c6c6c;line-height: 20px;">{{item.shopIntroduce}}</div>
            </div>

          </el-col>
          <el-col :span="2" style="">{{item.orderNumber}}</el-col>
          <el-col :span="3" style="color: #3c3c3c;font-weight: 700;">￥{{item.shopPrice}}</el-col>
          <el-col :span="3">{{item.shopNums}}</el-col>
          <el-col :span="3" class="deleteData"><p @click="handleDelete(item)">删除</p></el-col>
          <el-col :span="3" style="color: #3c3c3c;font-weight: 700;color: red">￥{{item.orderPrice}}</el-col>
          <el-col :span="3">{{item.orderStatus}}</el-col>
        </el-row>
      </div>
    </div>

  </div>
</template>

<script>
import {delBookorder, listBookorder2} from "@/api/book/bookorder";

export default {
  name: "OrderForm",
  data(){
    return{
      bookorderList:[],
      checked:true,
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      num: 1
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 删除按钮操作 */
    handleDelete(row) {
      const orderIds = row.orderId;
      this.$confirm('是否确认删除订单号为"' + row.orderNumber + '"的所有数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return delBookorder(orderIds);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      })
    },
    getUrl(data){
      return  process.env.VUE_APP_BASE_API+"/"+data
    },
    /** 查询购物车管理列表 */
    getList() {
      listBookorder2(this.queryParams).then(response => {
        this.bookorderList = response.rows;
      });
    },
    handleChange(value) {
      console.log(value);
    }
  }
}
</script>

<style scoped>
.sumData{
  position: fixed;
  height: 50px;
  line-height: 50px;
  width: 100%;
  bottom: 10px;
  /*border: 1px solid red;*/
  background-color: #e5e5e5;
  z-index: 9999;
}
.el-row{
  text-align: center;
}
.shopCartStyle .el-col{
  text-align: center;
  line-height: 70px;
}
.el-input-number--medium {
  width: 130px;
  line-height: 34px;

}
.deleteData{
  cursor: pointer;
}
.deleteData p{
  margin: 0;
}
.deleteData:hover{
  color: red;
}
</style>
